<template>
  <div>
    <div style="background-color: #f7f7f7">
      <van-nav-bar title="爱尔眼科" style="background-color: #36c14c">
        <!-- 引用地图下拉选框组件 -->
        <template #left>
          <find-hospital></find-hospital>
        </template>
        <template #right>
          <div
            v-if="$store.state.user.loginStatus"
            slot="right"
            style="color: #fff"
          >
            欢迎:{{ $store.state.user.userInfo.nickName }}
          </div>
          <div v-else slot="right" style="color: #fff">
            <router-link class="link" to="/login" style="color: #fff">登录</router-link>&nbsp;
            <router-link class="link" to="/register" style="color: #fff">注册</router-link>
          </div>
        </template>
      </van-nav-bar>
      <van-search
        v-model="value"
        placeholder="搜索科室、医生"
        input-align="center"
      />

      <van-swipe
        class="my-swipe"
        :autoplay="3000"
        indicator-color="white"
        style="height: 115px"
        v-if="data"
      >
        <van-swipe-item v-for="{ cid, img } in data.data" :key="cid">
          <img
            :src="`http://127.0.0.1:3000/${img}`"
            alt=""
            style="width: 100%"
          />
        </van-swipe-item>
      </van-swipe>
      <van-notice-bar
        left-icon="volume-o"
        text="热烈庆祝爱尔眼科成立二十周年,发布科研、人才、公益多战略,助推全球眼健康事业发展。"
      />
      <van-divider style="color: #1e1e1e; font-size: 15px; margin: 10px 0"
        >院内服务</van-divider
      >
      <van-grid :column-num="3" style="color: #36c14c">
        <van-grid-item to="/doctor" icon="friends-o" text="挂号问诊" />
        <van-grid-item to="/detailsList" icon="todo-list-o" text="诊疗项目" />
        <van-grid-item icon="comment-o" text="免费咨询">
          <!-- 智能客服模块开始 -->
          <router-link to="/customer">
            <van-grid-item
              icon="comment-o"
              text="免费咨询"
              style="color: #36c14c"
            />
          </router-link>
          <!-- 智能客服模块结束 -->
        </van-grid-item>
        <van-grid-item icon="after-sale" text="门诊缴费" />
        <van-grid-item icon="description" text="报告查询" />
        <van-grid-item icon="shield-o" text="医院信息" >
        </van-grid-item>
      </van-grid>
      <van-divider
        content-position="left"
        :style="{
          color: '#aaa',
          borderColor: '#aaa',
          padding: '0 16px',
          margin: '10px 0',
        }"
        >健康资讯</van-divider
      >
      <van-collapse v-model="activeName" accordion>
        <!-- <van-collapse-item title="活动标题1" name="1"
          >活动简介</van-collapse-item
        >
        <van-collapse-item title="活动标题2" name="2"
          >活动简介</van-collapse-item
        > -->
        <div id="gen" v-if="activitydata">
          <mt-navbar id="mint-ui" v-model="selected">
            <mt-tab-item
              v-for="item in activitydata"
              :key="item.fid"
              :id="item.fid"
            >
              {{ item.fname }}
            </mt-tab-item>
          </mt-navbar>

          <!-- 标题页 子组件 
       把获取到的数据 传给子组件
       绑定事件 把获取的标题页id传给兄弟组件 -->
          <detail
            :activity="item"
            @click.native="$router.push(`/content?cid=${item.aid}`)"
            v-for="item in activity"
            :key="item.aid"
          />
        </div>
      </van-collapse>
    </div>
  </div>
</template>

<script>
import NewsSelect from "@/components/NewsSelect.vue";
import detail from "../components/detail.vue";
import FindHospital from '@/components/FindHospital.vue';
export default {
  data() {
    return {
      data: null,
      active: "home",
      activeName: "",
      value: "",
      selected: 10,
      activitydata: [],
      // // num:10,
      activity: [],
    };
  },
  components: { NewsSelect, detail, FindHospital },
  mounted() {
    this.getBannerData();
    this.getData();
    this.getActivity();
  },
  methods: {
    getBannerData() {
      let url = `/home`;
      this.axios.get(url).then(res => {
        console.log("home");
        console.log(res);
        this.data = res.data;
      });
    },
    getData() {
      var url = `/activity/aier_activity_family`;
      console.log(url);
      this.axios.get(url).then(res => {
        console.log(res);
        this.activitydata = res.data;
      });
    },
    getActivity() {
      var url = `/activity/aier_activity?aier_activity_familyid=10`;
      console.log(url);
      this.axios.get(url).then(res => {
        console.log(res);
        this.activity = res.data;
      });
    },
  },
  // 监听导航项id 一有变化重新渲染页面
  watch: {
    selected(to, from) {
      console.log(`从${from}切换到了${to}`);
      this.axios
        .get(`activity/aier_activity?aier_activity_familyid=${to}`)
        .then(res => {
          console.log(res);
          this.activity = res.data;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .van-nav-bar__title {
  color: #fff;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}

#fname {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-evenly;
  margin-top: 20px;

  #text {
    font-size: 14px;
  }
}

.active {
  color: #36c14c;
}

::v-deep .mint-navbar .mint-tab-item.is-selected {
  color: #36c14c;
  border-bottom: 3px solid #36c14c;
}
</style>
